<template>
	<view class="page">

		<cu-custom :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText" class="titilestyle">
				<view class="titilestyle">
					{{title}}
				</view>
				
			</block>
		</cu-custom>

		<view class="content " v-if="pageData">

			<view class="head">
				<view class="item-box flex">
					<view class="left  basis-xs  flex justify-center">
						<image class="logo-box " :src="res+'/static/laundry/xiyi.png'" mode="heightFix"></image>

					</view>
					<view class="right  basis-xl flex align-stretch flex-direction">
						<view class="top  flex flex-direction justify-around align-start">
							<view class="">
								{{pageData.name}} <text class="sno">No.{{pageData.sno}}</text>
							</view>
							<view class="label-box">
								{{pageData.address}}
							</view>
						</view>



					</view>
				</view>

			</view>


			<view class="list ">
				<view class="top middle ">
					选择洗衣模式
				</view>

				<scroll-view scroll-y="true" class="select-box">
					<view class="item  flex justify-around flex-direction " v-for="(item,i) in pageData.pattern" :key="i"
						:class="i==itemIndex?'select':'noselect'" @click="changeItem(i)">
						<view class="first-child flex justify-between ">
							<view class="basis-df">
								{{item.name}}
							</view>

							<view class=" basis-df text-right">
								￥{{item.price}}
							</view>
						</view>
						<view class="scend-child ">
							<text class="cuIcon-time "></text><text>{{item.time}}</text>

							<text class="desc">{{item.desc}}</text>
						</view>

					</view>
				</scroll-view>


			</view>



			<view class="pay flex justify-between align-center">

				<view class="basis-df middle child-item">
					共 <text class="text-blue padding-lr-xs">{{item.price}}</text>元
				</view>
				
				<view class="basis-df middle secend-item" @click="pay">
					去支付
				</view>
			</view>



		</view>





	</view>
</template>

<script>
	import {getLaundryInfo} from "@/static/laundry/api.js"
	export default {
		data() {
			return {
				title: "",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				app: [{
						name: "扫码洗衣",
						icon: "/static/cloudClassroom/1.png",
						bgColor: "#4E73FF",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "我的订单",
						icon: "/static/cloudClassroom/2.png",
						bgColor: "#01D4CD",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "跑腿代洗",
						icon: "/static/cloudClassroom/3.png",
						bgColor: "#4884CC",
						path: "/pages/cloudClassroom/zhibo"
					}
				],
				pageData:null,
				itemIndex: 0,
				item:{
					price:0,
				},
				

			}
		},
		onLoad(option) {
			this.getInfo(option.id)
		},
		methods: {
			getInfo(id){
				getLaundryInfo(id).then((r)=>{
					this.pageData=r;
					
				}).catch(e=>{
					console.log(e);
					
				})
			},
			
			changeTab(i) {
				this.tabIndex = i;
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			changeItem(i) {
				this.itemIndex = i;
				this.item.price=this.pageData.pattern[i].price;
			},
			/**
			 * 支付
			 */
			pay(){
				uni.navigateTo({
					url:"./orderList"
				})
			}
			
		}







	}
</script>

<style lang="scss" scoped>
	.content {
		$w: calc(100vw*(670/750));
		$marginLR: calc(100vw*(40/750));
		font-family: PingFang SC;
		width: $w;

		.pay {
			width: $w;
			margin-left: $marginLR;
			position: fixed;
			bottom: 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			height: calc(100vw*(120/750));
			z-index: 99;
			font-size: 36rpx;
			font-weight: 800;
			padding: 10rpx;
			.child-item{
				color: #333333;
			}
			.secend-item{
				background: #1270E0;
				border-radius: 20rpx;
				font-weight: 500;
				height: calc(100vw*(100/750));
				color: #FFFFFF;
			}
		}

		.head {
			width: $w;
			margin: 20rpx $marginLR;
			font-family: PingFang SC;

			.item-box {
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				height: calc(100vw*(160/750));
				padding: 30rpx;

				.left {
					.logo-box {
						width: 100%;
						height: calc(100vw*(100/750));
					}

				}

				.right {
					padding-left: 38rpx;
					height: calc(100vw*(100/750));

					.top {
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
						height: inherit;

						.sno {
							padding-left: 31rpx;
							font-weight: 500;
							color: #999999;
						}

						.label-box {
							font-weight: 500;
							color: #999999;

						}
					}

					.bottom {
						margin-top: 23rpx;
						min-height: calc(100vw*(50/750));

						.item-btn {
							padding: 12rpx 23rpx;
							background: #1270E0;
							font-weight: 500;
							color: #FFFFFF;
						}
					}


				}

			}

		}

		.list {
			width: $w;
			margin: 20rpx $marginLR;

			.top {
				width: inherit;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				margin-bottom: 10rpx;
			}

			.select-box {
				height: 60vh;
				.item {
					margin-top: 20rpx;
					height: calc(100vw*(160/750));
					box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
					padding: 40rpx;

					border-radius: 20rpx;
					font-weight: 800;


					.first-child {
						font-size: 32rpx;

					}

					.scend-child {
						font-size: 24rpx;
						font-weight: 800;

						.cuIcon-time {
							margin: 0;
							font-size: 32rpx;
						}

						text {
							margin-left: 10rpx;
						}

						.desc {
							margin-left: 40rpx;
							font-weight: 500;
						}
					}

				}

				.noselect {
					background: #FFFFFF;

					.first-child {
						color: #333333;
					}

					.scend-child {
						color: #1270E0;

						.desc {
							color: #999999;
						}
					}

				}

				.select {
					background: #1270E0;
					color: white;
				}





			}
		}
	}
</style>
